<template>
	<view class="page_box">
		<view class="step_graphical mb--20rpx">
			<view v-for="(item,index) in stepListConfig" :key="index" :class="[item.style]">
				<view class="step_circle--active " v-if="currentStep>=item.circleIndex">
					<view class="circle_active--center circle_base">
					</view>
					<view class="circle_active--inside circle_base">
					</view>
				</view>
				<view class="step_circle--normal" v-else>
				</view>
			</view>
		</view>
		<view class="step_graphical space-between">
			<view v-for="(item,index) in stepListConfig.filter(item=>item.title)" :key="index" class="step_title"
				:class="[{
					'step_title--active':currentStep==item.circleIndex
				}]">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentStep: {
				type: Number,
				default:()=> 1
			}
		},
		data() {
			return {
				stepListConfig: [{
						type: 'circle',
						style: 'step_circle',
						title: '贷款信息',
						circleIndex: 1
					},
					{
						type: 'line',
						style: 'step_line'
					},
					{
						type: 'circle',
						style: 'step_circle',
						title: '授权页面',
						circleIndex:2
					},
					{
						type: 'line',
						style: 'step_line'
					},
					{
						type: 'circle',
						style: 'step_circle',
						title: 'e签宝授权',
						circleIndex: 3
					},
					{
						type: 'line',
						style: 'step_line'
					},
					{
						type: 'circle',
						style: 'step_circle',
						title: '信息确认',
						circleIndex: 4
					},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_box {
		padding: 20rpx 40rpx;
		background-color: #f1f1f1;

		.space-between {
			justify-content: space-between;
		}

		.mb--20rpx {
			margin-bottom: 14rpx;
		}

		.step_graphical {
			display: flex;
			align-items: center;

			.step_line {
				flex: 1;
				height: 2rpx;
				border-radius: 1rpx;
				border: 1rpx solid hotpink;
				opacity: 0.5;
			}

			.step_circle {
				margin: 0 16rpx;
				position: relative;

				.step_circle--normal {
					background: #f3a09d;
					border-radius: 50%;
					opacity: 0.7;
					width: 18rpx;
					height: 18rpx;
				}

				.circle_base {
					border-radius: 50%;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}

				.step_circle--active {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					position: relative;
					background: #f3c0bf;

					.circle_active--center {
						width: 38rpx;
						height: 38rpx;
						position: absolute;
						background: #f39e9b;
					}

					.circle_active--inside {
						width: 18rpx;
						height: 18rpx;
						position: absolute;
						background: #f54f4a;

					}

				}
			}

			.step_title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #959595;
			}

			.step_title--active {
				color: #000000;
			}
		}
	}
</style>